<!--
 @description 横向滚动
 @fileName ScrollFloor.vue
 @author zengqiongying
 @created 2023/03/02 15:13:12
-->
<template>
  <div class="scoll-floor-content" @scroll.stop>
    <Scroll ref="scroll" horizontal class="scoll-content">
      <div class="scroll-floor-main">
        <div v-for="(item,i) in list" :key="i" class="floor-item" @click="clickHandle(item)">
          <ImageVideo :host="imgHost" :src="item.pic" fit="contain" />
        </div>
      </div>
    </Scroll>
  </div>
</template>

<script>
import Scroll from '@/components/Scroll'
import ImageVideo from '@/components/ImageVideo'
import CommonMixin from './CommonMixin'
export default {
  name: 'ScrollFloor',
  components: {
    Scroll,
    ImageVideo
  },
  mixins: [CommonMixin],
  data() {
    return {

    }
  },
  methods: {

  }
}

</script>
<style lang='less' scoped>
.scoll-floor-content{
  padding: 0 16px;
  width:100%;
  height: 207px;
  overflow: hidden;
  box-sizing: border-box;
  .scoll-content{
    height: 207px;
    width: 100%;
    box-sizing: border-box;
  }
}
.scroll-floor-main{
  height: 207px;
  display:inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  .floor-item{
    display: block;
    margin-right: 16px;
    width: 137px;
    height: 207px;
    background: linear-gradient(180deg, #6F8CA2 0%, #909DA8 100%);
    border-radius: 8px;
    overflow: hidden;
    &:last-child{
      margin-right: 0;
    }
  }
}
</style>
